<!DOCTYPE html>



  


<html class="theme-next muse use-motion" lang="">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css" />


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT" />










<meta name="description" content="cookie与session有什么区别？ 由于HTTP协议是无状态的协议，所以服务端需要记录用户的状态时，就需要用某种机制来识具体的用户，这个机制就是Session.典型的场景比如购物车，当你点击下单按钮时，由于HTTP协议无状态，所以并不知道是哪个用户操作的，所以服务端要为特定的用户创建了特定的Session，用用于标识这个用户，并且跟踪用户，这样才知道购物车里面有几本书。这个Session是保">
<meta property="og:type" content="article">
<meta property="og:title" content="Session、LocatStorage、Cache-Control、ETag">
<meta property="og:url" content="http://yoursite.com/2018/05/10/Session、LocatStorage、Cache-Control、ETag/index.html">
<meta property="og:site_name" content="From&#39;s blog">
<meta property="og:description" content="cookie与session有什么区别？ 由于HTTP协议是无状态的协议，所以服务端需要记录用户的状态时，就需要用某种机制来识具体的用户，这个机制就是Session.典型的场景比如购物车，当你点击下单按钮时，由于HTTP协议无状态，所以并不知道是哪个用户操作的，所以服务端要为特定的用户创建了特定的Session，用用于标识这个用户，并且跟踪用户，这样才知道购物车里面有几本书。这个Session是保">
<meta property="og:locale" content="default">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/11007474-826f23f222850543.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/840">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/11007474-4e90160326a6ecca.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/11007474-1ce596507f0058d9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/740">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/11007474-42f368948ad72954.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/740">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/11007474-9217e337d2de516b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:updated_time" content="2018-05-10T11:36:43.885Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Session、LocatStorage、Cache-Control、ETag">
<meta name="twitter:description" content="cookie与session有什么区别？ 由于HTTP协议是无状态的协议，所以服务端需要记录用户的状态时，就需要用某种机制来识具体的用户，这个机制就是Session.典型的场景比如购物车，当你点击下单按钮时，由于HTTP协议无状态，所以并不知道是哪个用户操作的，所以服务端要为特定的用户创建了特定的Session，用用于标识这个用户，并且跟踪用户，这样才知道购物车里面有几本书。这个Session是保">
<meta name="twitter:image" content="https://upload-images.jianshu.io/upload_images/11007474-826f23f222850543.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/840">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Muse',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: 'Author'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/2018/05/10/Session、LocatStorage、Cache-Control、ETag/"/>





  <title>Session、LocatStorage、Cache-Control、ETag | From's blog</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="default">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">From's blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            Home
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            Archives
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/05/10/Session、LocatStorage、Cache-Control、ETag/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Wang hang">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="From's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">Session、LocatStorage、Cache-Control、ETag</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2018-05-10T19:36:22+08:00">
                2018-05-10
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h3 id="cookie与session有什么区别？"><a href="#cookie与session有什么区别？" class="headerlink" title="cookie与session有什么区别？"></a>cookie与session有什么区别？</h3><ol>
<li>由于HTTP协议是无状态的协议，所以服务端需要记录用户的状态时，就需要用某种机制来识具体的用户，这个机制就是Session.典型的场景比如购物车，当你点击下单按钮时，由于HTTP协议无状态，所以并不知道是哪个用户操作的，所以服务端要为特定的用户创建了特定的Session，用用于标识这个用户，并且跟踪用户，这样才知道购物车里面有几本书。这个Session是保存在服务端的，有一个唯一标识。在服务端保存Session的方法很多，内存、数据库、文件都有。集群的时候也要考虑Session的转移，在大型的网站，一般会有专门的Session服务器集群，用来保存用户会话，这个时候 Session 信息都是放在内存的，使用一些缓存服务比如Memcached之类的来放 Session。</li>
<li>思考一下服务端如何识别特定的客户？这个时候Cookie就登场了。每次HTTP请求的时候，客户端都会发送相应的Cookie信息到服务端。实际上大多数的应用都是用 Cookie 来实现Session跟踪的，第一次创建Session的时候，服务端会在HTTP协议中告诉客户端，需要在 Cookie 里面记录一个Session ID，以后每次请求把这个会话ID发送到服务器，我就知道你是谁了。有人问，如果客户端的浏览器禁用了 Cookie 怎么办？一般这种情况下，会使用一种叫做URL重写的技术来进行会话跟踪，即每次HTTP交互，URL后面都会被附加上一个诸如 sid=xxxxx 这样的参数，服务端据此来识别用户。</li>
<li>Cookie其实还可以用在一些方便用户的场景下，设想你某次登陆过一个网站，下次登录的时候不想再次输入账号了，怎么办？这个信息可以写到Cookie里面，访问网站的时候，网站页面的脚本可以读取这个信息，就自动帮你把用户名给填了，能够方便一下用户。这也是Cookie名称的由来，给用户的一点甜头。所以，总结一下：Session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中；Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。</li>
</ol>
<h3 id="什么是session？"><a href="#什么是session？" class="headerlink" title="什么是session？"></a>什么是session？</h3><p>服务器通过cookie给用户一个sessionID，<br>sessionID对应服务器里的一小块内存，<br>每次用户访问服务器的时候，服务器就通过sessionID去读取对应的session，来知道用户的隐私信息</p>
<ul>
<li>面试的时候怎么回答cookie和session的特点：<br><img src="https://upload-images.jianshu.io/upload_images/11007474-826f23f222850543.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/840" alt="image.png"></li>
</ul>
<h3 id="localStorage是什么"><a href="#localStorage是什么" class="headerlink" title="localStorage是什么"></a>localStorage是什么</h3><p>是html5技术提供的一个API，<br>session是服务器上的哈希表<br>localStorage的实质就是一个哈希表，是浏览器上的哈希表</p>
<ul>
<li><code>localStorage.setItem()</code> 接受两个参数，可以存一个key、value，只能以字符串的形式存<br>如果要存一个对象，可以用JSON.stringify进行转化</li>
<li><code>localStorage.getItem()</code> 可以获取值，只接受一个name</li>
<li><code>localStorage.clear()</code> 不接受参数，清空key、value<br>都是用来操作当前页面里面的哈希表</li>
</ul>
<p>localStorage不存在与页面里，它存在C盘的一个文件里<br>session的缺点就是占内存<br>应用：<br>场景：页面更新，提示用户，但是只提醒一次，用户二次进入（刷新）的时候不需要提示<br><img src="https://upload-images.jianshu.io/upload_images/11007474-4e90160326a6ecca.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"></p>
<ul>
<li>localStroage与sessionStroage的区别<br><img src="https://upload-images.jianshu.io/upload_images/11007474-1ce596507f0058d9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/740" alt="image.png"><br>sessionStroage与session没有关系</li>
</ul>
<h3 id="session与Cookie什么关系"><a href="#session与Cookie什么关系" class="headerlink" title="session与Cookie什么关系"></a>session与Cookie什么关系</h3><p>一般来说session是基于Cookie实现的，反过来说cookie是session的基石<br>以为session必须把sessionID放进cookie里再发送给客户端</p>
<p>session大部分时间是基于Cookie来存储ID的，但是它也可以通过查询参数和localStroage来存储它的ID</p>
<h3 id="localStroage与Cookie的区别"><a href="#localStroage与Cookie的区别" class="headerlink" title="localStroage与Cookie的区别"></a>localStroage与Cookie的区别</h3><p>cookie每次会带给服务器，localStroage不会带给服务器，它与HTTP无关<br>cookie最大4k，loaclStroage5MB左右</p>
<h3 id="Cache-Control"><a href="#Cache-Control" class="headerlink" title="Cache-Control"></a>Cache-Control</h3><p>HTTP缓存，web优化（常识）<br>将某文件缓存至本地<br><code>response.setHeather(‘Cache-Control’,&#39;max-age=30&#39;)</code>将文件在本地保留30s，刷新不会请求，30s后刷新重新请求，一般<code>max-age</code>要设置久一点例如十年！300000000（阔怕！）<br>但是，浏览器觉得你存那么久也没啥用，一般一年以后就帮你清了<br>你问有什么后果吗？<br>没有！反正也没bug，也就是加载可能慢一点点而已<br><img src="https://upload-images.jianshu.io/upload_images/11007474-42f368948ad72954.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/740" alt="image.png"><br>首页不会使用使用cache-contorl<br>如果要升级css或js就在后面加上一个查询参数<br>如<code>https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js</code><br>更新后：<code>https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js?v=2</code>这样的话<code>max-age=30&#39;</code>就会失效</p>
<ul>
<li>Expires和Cache-Control有什么区别<br>Expires设置的是时间点<br>Cache-Control设置的是时间长度<br>如果同时设置有限使用Cache-Control</li>
</ul>
<p>Cache-Control是升级后才有的，10几年前都是用Expires控制缓存<br><code>Expires: Wed, 21 Oct 2015 07:28:00 GMT</code>因为他用的本地时间，如果时间错乱了，那你就完了</p>
<h3 id="了解MD5-（讯息摘要算法）"><a href="#了解MD5-（讯息摘要算法）" class="headerlink" title="了解MD5 （讯息摘要算法）"></a>了解MD5 （讯息摘要算法）</h3><p>一种被广泛使用的<a href="https://zh.wikipedia.org/wiki/%E5%AF%86%E7%A2%BC%E9%9B%9C%E6%B9%8A%E5%87%BD%E6%95%B8" title="密码杂凑函数" target="_blank" rel="noopener">密码杂凑函数</a>，可以产生出一个128位元（16<a href="https://zh.wikipedia.org/wiki/%E5%AD%97%E8%8A%82" title="字节" target="_blank" rel="noopener">位元组</a>）的散列值（hash value），用于确保信息传输完整一致</p>
<p>举个栗子：<br>假如你在网上下载了一个软件，有300M，然而你不知道你下载的是不是和它的300M一样<br>这时就需要有个MD5，如果你们两个的MD5值一样，那么说明你下载的300M===它的300M<br>文件差异越小，MD5的差异越大</p>
<h3 id="ETag"><a href="#ETag" class="headerlink" title="ETag"></a>ETag</h3><p>用cache-Control是不请求，ETage是直接不下载，但还是有请求，但是响应体是空的<br>打开一个网页，初次打开会有一个ETag，<br>以后再打开它的时候请求里有一个if-none-match响应头，后面跟的就是MD5<br><img src="https://upload-images.jianshu.io/upload_images/11007474-9217e337d2de516b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"></p>
<p>转化为数字 parseInt（a，10） 写法等于 （+1）</p>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2018/05/09/时间复杂度的排序分析/" rel="next" title="时间复杂度的排序分析">
                <i class="fa fa-chevron-left"></i> 时间复杂度的排序分析
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2018/05/18/vim需要掌握的快捷键/" rel="prev" title="vim需要掌握的快捷键">
                vim需要掌握的快捷键 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            Table of Contents
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            Overview
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">Wang hang</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">52</span>
                  <span class="site-state-item-name">posts</span>
                </a>
              </div>
            

            

            
              
              
              <div class="site-state-item site-state-tags">
                
                  <span class="site-state-item-count">2</span>
                  <span class="site-state-item-name">tags</span>
                
              </div>
            

          </nav>

          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#cookie与session有什么区别？"><span class="nav-number">1.</span> <span class="nav-text">cookie与session有什么区别？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是session？"><span class="nav-number">2.</span> <span class="nav-text">什么是session？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#localStorage是什么"><span class="nav-number">3.</span> <span class="nav-text">localStorage是什么</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#session与Cookie什么关系"><span class="nav-number">4.</span> <span class="nav-text">session与Cookie什么关系</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#localStroage与Cookie的区别"><span class="nav-number">5.</span> <span class="nav-text">localStroage与Cookie的区别</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Cache-Control"><span class="nav-number">6.</span> <span class="nav-text">Cache-Control</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#了解MD5-（讯息摘要算法）"><span class="nav-number">7.</span> <span class="nav-text">了解MD5 （讯息摘要算法）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ETag"><span class="nav-number">8.</span> <span class="nav-text">ETag</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2018</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Wang hang</span>

  
</div>


  <div class="powered-by">Powered by <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a></div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">Theme &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Muse</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  

  

</body>
</html>
